<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性</title>
	<script src="lib/js/vue.js"></script>
</head>
<body>
	<div id="example">
	  a={{ a }}, b={{ b }}
	</div>
	<div id="demo">{{fullName}}</div>

	<script>
		var exampleVM = new Vue({
			el: "#example",
			data: {
				a: 1
			},
			computed: {
				// 计算一个属性的getter
				b: function() {
					// this指向'vm'实例
					return this.a+1;
				}
			}
		});
		var vm = new Vue({
		  el: '#demo',
		  data: {
		    firstName: 'Foo',
		    lastName: 'Bar',
		    fullName: 'Foo Bar'
		  }
		});

		vm.$watch('firstName', function (val) {
		  this.fullName = val + ' ' + this.lastName
		});

		vm.$watch('lastName', function (val) {
		  this.fullName = this.firstName + ' ' + val
		});

		// 比$watch更好
		var vm1 = new Vue({
		  el: '#demo',
		  data: {
		    firstName: 'Foo',
		    lastName: 'Bar'
		  },
		  computed: {
		    fullName: function () {
		      return this.firstName + ' ' + this.lastName
		    }
		  }
		})
	</script>
</body>
</html>